<template>
  <div class="project-member">
    <div class="project-member-head">
      <div class="search">
        <el-form inline :model="searchForm" label-width="85px">
          <el-form-item label="任务名称:">
            <el-input v-model="searchForm.taskTitle" placeholder="请输入" clearable style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button :icon="Search" type="primary" @click="handleSearch">搜索</el-button>
            <el-button :icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="project-member-content">
      <el-table :data="tableData" v-loading="loading" border :header-cell-style="tabelHeaderCellStyle" height="100%">
        <el-table-column type="index" width="80"></el-table-column>
        <el-table-column show-overflow-tooltip label="任务名称" prop="taskTitle"></el-table-column>
        <el-table-column show-overflow-tooltip label="任务内容" prop="taskDetail">
          <template v-slot="scope">
            {{ convertToPlain(scope.row.taskDetail) }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="延期原因" prop="taskUserName">
          <template v-slot="scope">
            {{ mulTranslation(scope.row.tcTaskInfoDelays) }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="负责人" prop="taskUserName" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="开始时间" prop="planBegintime"></el-table-column>
        <el-table-column show-overflow-tooltip label="结束时间" prop="planEndtime"></el-table-column>
        <el-table-column show-overflow-tooltip label="操作" prop="role" width="200px" align="center">
          <template v-slot="scope">
            <el-button :icon="Edit" circle @click="handleEdit(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="queryInfo.params.pageNum"
        v-model:page-size="queryInfo.params.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <!-- 编辑任务 -->
    <EditTaskList v-model="editVisible" @refresh="refresh" :singleTaskData="singleTaskData"></EditTaskList>
  </div>
</template>
<script setup>
import { Search, Plus, Refresh, Edit } from '@element-plus/icons-vue'
import { getTcTaskInfoList } from '@/assets/api/task'
import { convertToPlain } from '@/utils/task-utils.js'
import { useDictionary } from '@/use/use-dictionary'
const dict = useDictionary(['task_info_delay_reason'])

const props = defineProps({
  projectId: {
    type: String,
    default: '',
  },
})
const searchForm = ref({})
const tableData = ref([])
const loading = ref(false)

const currentUser = ref({})

function tabelHeaderCellStyle() {
  return {
    'background-color': 'var(--elp-color-info-light-9)',
    color: 'var(--elp-color-black)',
    'text-align': 'center',
    fontWeight: '400',
  }
}
const queryInfo = reactive({
  params: {
    pageSize: 10,
    pageNum: 1,
  },
})
const dataTotal = ref(0)
function handleSizeChange(val) {
  queryInfo.params.pageSize = val
  getList()
}
function handleCurrentChange(val) {
  queryInfo.params.pageNum = val
  getList()
}
// 查询
getList()
function getList() {
  loading.value = true
  const params = {
    delayFlag: 1,
    projectId: props.projectId,
    ...queryInfo.params,
    ...searchForm.value,
  }
  getTcTaskInfoList(params)
    .then((res) => {
      if (res.code === 200) {
        tableData.value = res.rows || []
        loading.value = false
        dataTotal.value = res.total
      }
    })
    .catch(() => {})
}
// 条件查询
function handleSearch() {
  getList()
}
// 重置
function handleReset() {
  searchForm.value = {}
  queryInfo.params.pageSize = 10
  queryInfo.params.pageNum = 1
  getList()
}

// 编辑
const editVisible = ref(false)
const singleTaskData = ref()
function handleEdit(row) {
  editVisible.value = true
  singleTaskData.value = row
}

function refresh() {
  getList()
}

function mulTranslation(val) {
  if (val) {
    const arr = val.map(({ reasonId }) => reasonId)
    const filteredLabels = dict.dictMap['task_info_delay_reason']
      .filter((item) => arr.includes(Number(item.dictValue)))
      .map((item) => item.dictLabel)
    const strFilteredLabels = filteredLabels.join()
    return strFilteredLabels
  } else {
    return ''
  }
}
</script>

<style lang="scss" scoped>
.project-member {
  height: 100%;
  &-head {
    display: flex;
    justify-content: space-between;
    height: 50px;
    .elp-form-item {
      margin-right: 50px;
    }
    .action {
      .elp-button {
        padding: 10px;
      }
    }
  }
  &-content {
    .elp-table {
      margin-bottom: 20px;
    }
    .elp-pagination {
      justify-content: flex-end;
    }
    height: calc(100% - 100px);
    .project::before {
      background-color: var(--elp-color-primary);
    }
    .leave::before {
      background-color: var(--elp-color-info);
    }
    .project,
    .leave {
      display: flex;
      align-items: center;
      &::before {
        content: ' ';
        display: block;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        border-radius: 50%;
      }
    }
  }
}
</style>
